<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>svg动画</title>
  <style>
  body2 {
  background: #fff;
  height: 200vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.motionblur2 {
  position: relative;
  width: 300px;
  height: 100px;
  -webkit-animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.box2 {
  position: absolute;
  left: calc(250% - 50px);
  width: 100px;
  height: 100%;
  background: #957fc4;
  -webkit-animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.box2::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 100%;
  background: linear-gradient(90deg, rgba(149, 127, 196, 0.5) 50%, rgba(149, 127, 196, 0) 100%);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95)-1.5s infinite;
          animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95)-1.5s infinite;
}
.box2::after {
  content: '';
  position: absolute;  left:20px;top:100px; 
  left: -100px;
  width: 200px;
  height: 100%;
  background: linear-gradient(90deg, rgba(149, 127, 196, 0) 0%, rgba(149, 127, 196, 0.5) 50%);
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
          animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}

@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.3, 1, 1);
            transform: scale3d(1.3, 1, 1);
  }
  55% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  100% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
}

@keyframes scale {
  0% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.3, 1, 1);
            transform: scale3d(1.3, 1, 1);
  }
  55% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  100% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
}
@-webkit-keyframes slide {
  0% {
    -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(150px, 0, 0);
            transform: translate3d(150px, 0, 0);
  }
}
@keyframes slide {
  0% {
    -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(150px, 0, 0);
            transform: translate3d(150px, 0, 0);
  }
}
  body1 {
  background: #fff;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 800px;
  height: 150px;
}
.motionblur1 {
  position: relative;
  width: 300px;
  height: 100px;
  -webkit-animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.box1 {
  position: absolute;
  left: calc(120% - 40px);
  width: 100px;
  height: 100%;
  background: #957fc4;
  -webkit-animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.box1::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 100%;
  background: linear-gradient(90deg, rgba(149, 127, 196, 0.5) 50%, rgba(149, 127, 196, 0) 100%);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95)-1.5s infinite;
          animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95)-1.5s infinite;
}
.box1::after {
  content: '';
  position: absolute;
  left: -100px;
  width: 200px;
  height: 100%;
  background: linear-gradient(90deg, rgba(149, 127, 196, 0) 0%, rgba(149, 127, 196, 0.5) 50%);
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
          animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}

@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.3, 1, 1);
            transform: scale3d(1.3, 1, 1);
  }
  55% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  100% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
}

@keyframes scale {
  0% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.3, 1, 1);
            transform: scale3d(1.3, 1, 1);
  }
  55% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  100% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
}
@-webkit-keyframes slide {
  0% {
    -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(150px, 0, 0);
            transform: translate3d(150px, 0, 0);
  }
}
@keyframes slide {
  0% {
    -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(150px, 0, 0);
            transform: translate3d(150px, 0, 0);
  }
}
  

.example {
  position:relative;
  margin:150px auto;
  width:50px;
  height:50px;
}
.dot:before{
  content:' ';
  position: absolute;
  z-index:2;
  left:0;
  top:0;
  width:10px;
  height:10px; 
  background-color: black;
  border-radius: 50%;
}
.dot:after {
  content:' ';
  position: absolute;
  z-index:1;
  width:10px;
  height:10px; 
  background-color: black;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
  -webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
  -webkit-animation-duration: 1.5s;/*动画持续时间*/
  -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
  -webkit-animation-delay: 0s;/*动画延迟时间*/
  -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
  -webkit-animation-direction: alternate;/*定义动画方式*/
}
@keyframes ripple {
   0% {
    left:5px;
    top:5px;
    opcity:75;
    width:0;
    height:0;
  }
  100% {
    left:-20px;
    top:-20px;
    opacity: 0;
    width:50px;
    height:50px;
  }
}
.example2 {
  position:relative;
  margin:150px auto;
  width:50px;
  height:50px;
}
.dot2:before{
  content:' ';
  position: absolute;
  z-index:2;
  left:0;
  top:0;
  width:10px;
  height:10px; 
  background-color: #ff4200;
  border-radius: 50%;
}

.dot2:after {
  content:' ';
  position: absolute;
  z-index:1;
  width:10px;
  height:10px; 
  background-color: #ff4200;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
  -webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
  -webkit-animation-duration: 1s;/*动画持续时间*/
  -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
  -webkit-animation-delay: 0s;/*动画延迟时间*/
  -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
  -webkit-animation-direction: normal;/*定义动画方式*/
}

@keyframes ripple {
   0% {
    left:5px;
    top:5px;
    opcity:75;
    width:0;
    height:0;
  }
  100% {
    left:-20px;
    top:-20px;
    opacity: 0;
    width:50px;
    height:50px;
  }
}

 .first{
        display: flex;
        justify-content: flex-start;
	    align-items: flex-start;
		}
</style>
</head>
<body>
<div class="motionblur2">
  <div class="box2">
  </div>
  </div>
<div class="motionblur1">
  <div class="box1">
  </div>
  </div>
<div class="example2">
  <div class="dot2">
  </div>
  </div>
<div class="example">
  <div class="dot">
  </div>
  </div>
  <div> </div>
  <div class="first">
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="circle" class="svg-inline--fa fa-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 999 999"  style="width: 200px;height: 125px;">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"></path>
</svg> 
<div></div>
  <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="circle" class="svg-inline--fa fa-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 999 999"  style="width: 200px;height: 125px;">
  <path fill="#FFC0CB" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z">
  </path>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="150" cy="200" r="40" stroke="#FFC0CB" stroke-width="25" fill="#FFC0CB" />
   <circle cx="350" cy="200" r="40" stroke="#FFC0CB" stroke-width="25" fill="#FFC0CB" />
   <path d="M 100 280 q 150 300 300 0" stroke="pink" stroke-width="25" fill="none"/>
  </svg>
 <div> </div>
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" class="svg-inline--fa fa-star fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1152 1024"  style="width: 200px;height: 125px;" >
<path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z">
</path>
</svg>
<div> </div>
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" class="svg-inline--fa fa-star fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"   style="width: 200px;height: 125px;">
<path fill="#FFF68F" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z">
</path>
<circle cx="500" cy="215" r="45" stroke="white" stroke-width="25" fill="white" />
</svg>
</div>
</body>
</html>